<template>
    <div style="height: 100%">
      <div class="title">好友搜索</div>
      <el-input v-model="searchContent" placeholder="搜索用户" @input="search" class="searchBar"></el-input>
      <GeminiScrollbar :style="{height:(windowHeight - 70)+'px'}">
      <div v-for="userInfo in searchResult" class="cardContain">
        <el-card shadow="hover" class="elcard">
                  <el-avatar class="avatar" :size="50" :src="userInfo.avatar"></el-avatar>
          <div>{{userInfo.username}}
            <i style="color:skyblue;" v-if="userInfo.gender === 1" class="el-icon-male"></i>
            <i style="color:pink;" v-else class="el-icon-female"></i>
          </div>
          <div style="color: #99a9bf">{{userInfo.uid}}</div>
          <el-button type="primary" class="button" plain @click="addFriend(userInfo)">加好友</el-button>

        </el-card>
<!--        {{userInfo.username}} ({{userInfo.uid}})-->
      </div>
      </GeminiScrollbar>
      <el-dialog class="myDialog" v-if="friendInfo!=null"
        title="添加好友"
        :visible.sync="dialogVisible"
        width="30%" >
        <el-avatar :size="50" :src="friendInfo.avatar" style="float: left; margin:0 15px 15px 0;"> </el-avatar>
        <div>{{friendInfo.username}}
          <i style="color:skyblue;" v-if="friendInfo.gender === 1" class="el-icon-male"></i>
          <i style="color:pink;" v-else class="el-icon-female"></i>
        </div>
        <div>{{friendInfo.content}}</div>
        <el-input v-model="verifycationMessage" placeholder="请填写验证信息"></el-input>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendAddFriendMessage">发 送</el-button>
  </span>
      </el-dialog>

    </div>
</template>

<script>
  export default {
    name: 'SearchUserCard',
    props:['stompClient', 'windowHeight', 'allFriendRequest'],
    data(){
      return{
        searchContent: null,
        searchResult:null,
        dialogVisible: false,
        friendInfo: null,
        verifycationMessage: '',
        userInfo: JSON.parse(window.localStorage.getItem('userInfo'))
      }
    },
    methods:{
      search(){
        var that =this
        if(that.searchContent === '')
          return
        this.$http(this.$api.searchUser,{content:this.searchContent}).then(res=>{
          that.searchResult = res.data
          console.log(res)
        })
      },
      addFriend(userInfo){
        this.friendInfo = userInfo
        this.dialogVisible = true
      },
      sendAddFriendMessage(){
        console.log(this.verifycationMessage)
        console.log(this.friendInfo)
        var that = this
        this.stompClient.send('/app/addFriendRequest',{},
          JSON.stringify({uid: that.userInfo.uid, toId: that.friendInfo.uid, type: 'send', content: that.verifycationMessage}))
        that.$message.success("发送成功")
        that.allFriendRequest.push(
          {
            tagId: that.friendInfo.uid,
            type: "send",
            time: "刚刚",
            content: that.verifycationMessage,
            hasRead: false,
            options: "none",
            tagUserInfo: that.friendInfo
          }
        )
        that.dialogVisible = false
      }
    }
  }
</script>

<style scoped>
  .title
  {
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    border-style: solid; border-width: 0 0 1px 0; border-color: #E5E9F2;
    margin-bottom: 10px;
    background-color: #f9f8f7;
  }
.avatar{
  position: absolute;
  top: 10px;
  left: 20px;
}
  .myDialog{
    text-align: left;
  }
  .cardContain{
    width: 270px;
    display: inline-block;
    margin: 10px;
    position: relative;
  }
  .elcard{
    padding-left: 70px;
    padding-bottom: 20px;
    text-align: left;
  }
  .searchBar{
    margin-bottom: 20px;
    width: 90%;
  }
  .button{
    float: right;
  }
</style>
